function PageController() {
    // public methods
    this.loadPage = loadPage;
    this.notifyNewReceivedData = notifyNewReceivedData;

    /**
     * Load page setup page.
     */
    function loadPage() {
        // load data
        bindData();
        // populate page event
        bindEvents();
    }

    function bindData() {
        // Code test
        /**/
        
        // Retrieve all image --> to generate current gallery
        var result = dataCommunication.getImages();
        if (Utils.isNotEmpty(result))
            updateGallery(result);

        // Retrieve all album --> for add image
        var albums = dataCommunication.getAlbums();
        if (Utils.isNotEmpty(albums)) {
            updateAlbumSelect(albums, 'list-album', 'please select an album');
        }
    }
    
    function updateGallery(json) {
       var gallery = $('.rotator ul');
       $(gallery).empty();
       
       for (var i = 0; i < json.length; i++) {
           var li = "<li><a href=\"#link" + i+ "\"><img src=\"" + json[i].URL + "\" width=\"500\" height=\"313\"  alt=\"pic" +i+ "\" /></a></a></li>";
           $(gallery).append(li);
       }
       $('.rotator ul li').first().addClass('show');
       resetRotator();
    }
    
    function getCurrentImage() {
        var image = {
            URL: "",
            COMMENT: "",
            ALBUM: ""
        };
        image.URL = $('#img-url').val();
        image.COMMENT = $('#img-comment').val();
        image.ALBUM = $('#list-album').val();
        
        return image;
    }
    
    function getCurrentAlbum() {
        var album = {
            name: "",
            author: ""
        };
        album.name = $('#album-name').val();
        album.author = $('#album-author').val();
        
        return album;
    }

    function bindEvents() {
        $('#btn-test').live('click', function() {
            var btn = this;
            $('#msg-first').toggle('slow', function() {
                var text = $(btn).val();
                if (text == 'Hide') {
                   $(btn).val('Show');
                } else {
                   $(btn).val('Hide');
                }
            }); 
        });
        
        // Show/hide add image (from url) form
        $('#btn-show-add-img').live('click', function() {
           $('#frm-add-img').toggle('slow');
        });
        // Show/hide add album form
        $('#btn-show-add-album').live('click', function() {
           $('#frm-add-album').toggle('slow');
        });
        
        $('#btn-add').live('click', function() {
            var image = getCurrentImage();
            if (Utils.isEmpty(image.URL)) {
                alert("Please enter your image' url");
                return;
            }
            result = dataCommunication.addImage(image);
            if (result != 'OK') {
                Utils.log(LogType.ERROR, 'add image error', result);
                alert(result);
            }
            var images = dataCommunication.getImages();
            updateGallery(images);
        });
        
        $('#btn-add-album').live('click', function() {
            //alert("This function shall be implemented soon. Thank you.");
            var album = getCurrentAlbum();
            if(Utils.isEmpty(album.name) || Utils.isEmpty(album.author)) {
                alert("Please enter your both album name and author");
                return;
            }
            var result = dataCommunication.addAlbum(album);
            alert(result);
            var albums = dataCommunication.getAlbums();
            if (Utils.isNotEmpty(albums)) {
                updateAlbumSelect(albums, 'list-album' ,'please select an album');
            }
            /*var image = getCurrentImage();
            if (Utils.isEmpty(image.URL)) {
                alert("Please enter your image' url");
                return;
            }
            result = dataCommunication.addImage(image);
            updateGallery(result);
            */
        });
    
        //Load the slideshow
        theRotator();
        $('div.rotator').fadeIn(1000);
        $('div.rotator ul li').fadeIn(1000); // tweek for IE
    }
    
    function updateAlbumSelect(albums, selectId, title) {
        SelectUtils.clearOptions(selectId);
        SelectUtils.appendOptionLast(selectId, -1, title);
        for (var i = 0; i < albums.length; i++) {
            SelectUtils.appendOptionLast(selectId, albums[i].id, albums[i].name);
        }
    }

    function notifyNewReceivedData(event, data) {
        updateDisplay(event, data);
    }

    function updateDisplay(event, data) {

    }
}